<template>
  <div class="app-container">
    <el-container v-if="$route.path !== '/login'">
      <el-header>
        <div class="header-content">
          <h1>TestExecutionPlatform</h1>
          <div class="menu-container">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="1">项目列表</el-menu-item>
              <el-menu-item index="2">开发信息</el-menu-item>
              <el-menu-item index="3">发布信息</el-menu-item>
              <el-menu-item index="4">XTS报告</el-menu-item>
            </el-menu>
            <el-button type="danger" link @click="handleLogout">退出登录</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer class="footer">
        <div class="footer-content">
          <p>© 2025 TestExecutionPlatform</p>
        </div>
      </el-footer>
    </el-container>
    <router-view v-else />
  </div>
</template>

<style scoped>
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'App',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 根据当前路径初始化 activeIndex
    const getInitialActiveIndex = (path) => {
      switch (path) {
        case '/':
          return '1'
        case '/developer-info':
          return '2'
        case '/publish-info':
          return '3'
        case '/xts-reports':
          return '4'
        default:
          return '1'
      }
    }
    
    const activeIndex = ref(getInitialActiveIndex(route.path))

    // 根据路由路径设置activeIndex
    const setActiveIndex = (path) => {
      activeIndex.value = getInitialActiveIndex(path)
    }

    // 监听路由变化
    watch(() => route.path, (newPath) => {
      setActiveIndex(newPath)
    })

    const handleSelect = (key) => {
      switch (key) {
        case '1':
          router.push('/')
          break
        case '2':
          router.push('/developer-info')  // 确保使用正确的路径
          break
        case '3':
          router.push('/publish-info')
          break
        case '4':
          router.push('/xts-reports')
          break
      }
    }

    return {
      activeIndex,
      handleSelect
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background-color: #545c64;
  color: white;
  padding: 0;
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-content h1 {
  margin-right: 20px;
  margin-left: 20px;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
  margin-bottom: 50px; /* 为footer预留空间 */
}

.el-footer {
  background-color: #e8f1f3;
  color: rgb(5, 19, 46);
  text-align: center;
  height: 30px;
  margin-top: auto; /* 将footer推到底部 */
}

.footer-content {
  padding: 0px 0;
}
</style>
